<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <!-- <meta name="viewport" content="width=device-width, initial-scale=1"> -->
        <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
        <title>弹窗试验</title>
        <!-- Bootstrap -->
        <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
        <style type="text/css">

            .pop_wrap {
                z-index: 1400;
                width: 1360px;
                position: absolute;
                top: 150px;
                /* display: none; */
            }
            .pop_con {
                width: 500px;
                height: 200px;
                margin: 0 auto 0;
                background: #fafafa
            }
            .pop_p {
                font-size: 20px;
                margin-top: 50px;
                text-align: center;
            }
            .pop_row {
                margin-top: 50px;
            }
            .pop_btn {
                text-align: center;
                height: 30px;
            }
            .w_200 {
                width: 200px;
            }
            .pop_mask {
                z-index:1300;
                position: absolute;
                top:0px;
                left:0px;
                background:#000000;
                opacity:0.5;
                width:1920px;
                height:2052px;
                /* display: none; */
            }
        </style>
    </head>
    <body>
        <!-- <div class="pop_wrap" id="confirm_pop" style="display: none;">
            <div class="container pop_con">
                <p class="pop_p">确定要取消么?</p>
                <div class="row pop_row">
                    <div class="col-xs-6 pop_btn">
                        <button type="button" id="btn_x" class="btn btn-lg btn-default w_200">算了</button>
                    </div>
                    <div class="col-xs-6 pop_btn">
                        <button type="button" id="btn_o" class="btn btn-lg btn-primary w_200">确定</button>
                    </div>
                </div>
            </div>
        </div> -->
        <input id="enter" type="button" value="点击">
        <div class="pop_mask" id="pop_mask" style="display: none;"></div>

        <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
        <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
        <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
        <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

        <script type="text/javascript">

            $(function(){
                $('#enter').on("click", function(){
                    $("#pop_mask").show();
                    var pop = $('<div class="pop_wrap" id="confirm_pop"><div class="container pop_con"><p class="pop_p">确定要取消么?</p><div class="row pop_row"><div class="col-xs-6 pop_btn"><button type="button" id="btn_x" class="btn btn-lg btn-default w_200">算了</button></div><div class="col-xs-6 pop_btn"><button type="button" id="btn_o" class="btn btn-lg btn-primary w_200">确定</button></div></div></div></div>');
                    $('body').prepend(pop);
                    $("#confirm_pop").show();
                    $("#btn_x").on("click", function(){
                        alert('xxxx');
                        $("#confirm_pop").remove();
                        // $("#confirm_pop").hide();
                        $("#pop_mask").hide();
                    });
                    $("#btn_o").on("click", function(){
                        alert('oooo');
                        $("#confirm_pop").remove();
                        // $("#confirm_pop").hide();
                        $("#pop_mask").hide();
                    });
                });
            });

        </script>
    </body>
</html>
